<template>
  <div class="element-plus">
    <hb-table :table-options="tableOptions" :page-options="pageOptions" />
  </div>
</template>
<script lang="jsx">
import { reactive, defineComponent, onMounted } from 'vue'

export default defineComponent({
  setup() {
    // table 属性
    const tableOptions = reactive({
      data: [],
      columns: [],
    })
    // 分页属性
    const pageOptions = reactive({
      total: 0,
      page: 1,
      size: 10,
    })
    onMounted(() => {
      // 挂载
      tableOptions.columns = [
        {
          prop: 'name',
          label: '姓名',
          nested: true,
          columns: [
            {
              prop: 'first_name',
              label: '姓',
              render(row, column) {
                return (
                  <span style={{ fontSize: '20px', color: '#ff00ff' }}>
                    {row.first_name}
                  </span>
                )
                // return h(
                //     'span',
                //     {
                //         style: {
                //             fontSize: '20px',
                //             color: '#ff00ff',
                //         },
                //     },
                //     row.first_name
                // )
              },
            },
            {
              prop: 'last_name',
              label: '名',
            },
          ],
        },
        {
          prop: 'age',
          label: '年龄',
        },
        {
          prop: 'birthday',
          label: '出生年月',
        },
        {
          prop: 'address',
          label: '地址',
        },
      ]
      // 模拟数据
      tableOptions.data = new Array(10).fill(0).map((index) => ({
        first_name: '王',
        last_name: '二',
        age: 34,
        birthday: '1991-01-01',
        address: '北京故宫博物院',
      }))
    })
    return {
      tableOptions,
      pageOptions,
    }
  },
})
</script>
<style lang="less" scoped></style>
